import React from "react"
import { Image, View } from "@tarojs/components"
import clsx from "clsx"
import styles from "./index.module.scss"
import { pxTransform } from "@tarojs/taro"

type IProps = {
  className?: string
  images?: string[]
  /** @default 32 */
  size?: number
}
/**
 * @component 头像堆叠
 */
export default function ImageCascade({ className, images, size = 32 }: IProps) {
  if (!images || images.length === 0) {
    // 默认展示五个头
    images = [
      "https://csstatic.91goodschool.com/UpFiles/gp/1000/202404/09/182234075623_w400.webp",
      "https://csstatic.91goodschool.com/UpFiles/gp/1000/202404/09/182318985572_w400.webp",
      "https://csstatic.91goodschool.com/UpFiles/gp/1000/202404/09/182336581193_w400.webp",
      "https://csstatic.91goodschool.com/UpFiles/gp/1000/202404/09/182352614210_w400.webp",
      "https://csstatic.91goodschool.com/UpFiles/gp/1000/202404/09/182404577935_w400.webp"
    ]
  }
  // 外出容器边框为3px
  const _size = size - 6
  const imageSize = pxTransform(_size)
  return (
    <View className={clsx(styles.wrapper, className)}>
      {images.map((l, index) => (
        <View
          key={index}
          className={styles.imageWrap}
          style={{
            marginLeft: index === 0 ? 0 : pxTransform(-_size / 2),
            zIndex: images.length - index
          }}
        >
          <Image
            src={l}
            className={styles.image}
            style={{
              width: imageSize,
              height: imageSize
            }}
          />
        </View>
      ))}
    </View>
  )
}
